<template>
	<div>
		<!-- 导航栏 -->
		<div class="nav">
			<Nav></Nav>
		</div>

		<!-- 大文本 -->
		<div class="bigword">专业设计师在<span>花瓣</span>发现、收集灵感</div>

		<!-- 主题 -->
		<div class="zhuti">
			<div :class="one" @click="changehangye('行业')">行业灵感</div>
			<div :class="two" @click="changebjieri('节日')">节日热点</div>
			<div :class="there" @click="changebsheji('设计')">设计趋势</div>
		</div>
		<!-- 内容的最大盒子 -->
		<div class="bigaa">
			<!-- 循环后的div -->
			<div class="bigbox">
				<!-- ============================================================= -->
				<!-- 行业 -->
				<div
					class="bigbox2"
					v-for="(e, index) in mydata"
					:key="e.uid"
					v-if="showbox1"
					:style="{
						backgroundImage: `url(${
							proxy.shouyeimg + e.shouyeimg
						})`,
						backgroundSize: 'cover',
					}"
				>
					<div class="hei">
						<div class="wenzhangbox">
							<!-- 采集 -->
							<div class="zuozhe">
								{{ e.title }}
							</div>
							<!-- 粉丝 -->
							<div class="fenshi">
								{{ e.gather }} 采集 {{ e.vermicelli }} 粉丝数
							</div>
						</div>
					</div>
				</div>

				<!-- ============================================================= -->
				<!-- 节日 -->
				<div
					class="bigbox2"
					v-for="(e, index) in mydata"
					:key="e.uid"
					v-if="showbox2"
					:style="{
						backgroundImage: `url(${
							proxy.shouyeimg + e.shouyeimg
						})`,
						backgroundSize: 'cover',
					}"
				>
					<div class="hei">
						<div class="wenzhangbox">
							<!-- 采集 -->
							<div class="zuozhe">
								{{ e.title }}
							</div>
							<!-- 粉丝 -->
							<div class="fenshi">
								{{ e.gather }} 采集 {{ e.vermicelli }} 粉丝数
							</div>
						</div>
					</div>
				</div>

				<!-- ============================================================= -->
				<!-- 设计趋势 -->
				<div
					class="bigbox2"
					v-for="(e, index) in mydata"
					:key="e.uid"
					v-if="showbox3"
					:style="{
						backgroundImage: `url(${
							proxy.shouyeimg + e.shouyeimg
						})`,
						backgroundSize: 'cover',
					}"
				>
					<div class="hei">
						<div class="wenzhangbox">
							<!-- 采集 -->
							<div class="zuozhe">
								{{ e.title }}
							</div>
							<!-- 粉丝 -->
							<div class="fenshi">
								{{ e.gather }} 采集 {{ e.vermicelli }} 粉丝
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, watch, onMounted } from 'vue';
let { proxy } = getCurrentInstance();
import Nav from './nav.vue';

// 切换背景颜色
let showbox1 = ref(true);
let showbox2 = ref(false);
let showbox3 = ref(false);

let one = ref('baizi');
let two = ref();
let there = ref();
let dd = ref('baizi');
let zz = ref('heizi');

//切换背景内容
let changehangye = () => {
	// 样式切换
	there.value = zz.value;
	two.value = zz.value;
	one.value = dd.value;
	showbox1.value = true;
	showbox2.value = false;
	showbox3.value = false;
	console.log(showbox3.value);
};
let changebjieri = () => {
	there.value = zz.value;
	two.value = dd.value;
	one.value = zz.value;
	showbox1.value = false;
	showbox3.value = false;
	showbox2.value = true;
	console.log(showbox3.value);
};
let changebsheji = () => {
	there.value = dd.value;
	two.value = zz.value;
	one.value = zz.value;
	showbox1.value = false;
	showbox2.value = false;
	showbox3.value = true;
	console.log(showbox3.value);
};

//发起网络请求
let mydata = ref();
onMounted(async () => {
	let res = await proxy.$axios.post('/egg/shouye', {});
	console.log(res.data);
	mydata.value = res.data;
	console.log(mydata.value[0]);
});
console.log(mydata.value);
</script>

<style scoped>
	.nav {
		position: absolute;
		top: 0;
		left: 10px;
	}
* {
	margin: 0px;
	padding: 0;
}
/* 内容的最大盒子用于把 .bigbox垂直居中 */
.bigaa {
	/* position: absolute;
	top: 210px;
	left: 10px; */
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 装载循环后的div 设置超出换行 */
.bigbox {
	display: flex;
	width: 1258px;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap; /*超出换行*/
}
.bigbox2 {
	margin-right: 5px;
	margin-bottom: 10px;
}

.zuozhe {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	overflow: hidden;
	/* white-space: nowrap; */
}
.fenshi {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
}
/* 文章的div */
.wenzhangbox {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	width: 150px;
	height: 190px;

	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.85),
		transparent 40%,
		transparent
	) !important;
	/* transition: transform 0.22s ease-in-out !important; */
}

.hei {
	flex-direction: column;
	justify-content: end;
	display: flex;
	justify-content: center;
	align-items: center;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
}
/* 大文本 */
.bigword {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 300;
	font-size: 48px;
	text-align: center;
	z-index: 1;
	margin-bottom: 0.5em;
	margin-top: 26px;
	
	/* position: absolute;
	top: 60px;
	left: 350px; */
	
}
/* 花瓣颜色 */
.bigword > span {
	color: #ff5967;
}
/* 主题 */
.zhuti {
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* position: absolute;
	top: 170px;
	left: 500px; */
	
}

.zhuti > div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 44px;
	margin-left: 10px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
}

/* 白底黑字 */
.heizi {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 44px;
	background-color: #ffffff;
	color: rgb(0, 0, 0);
	margin-left: 10px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
}
/* 白底黑字 */
.baizi {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 44px;
	background-color: #1c1f23;
	color: aliceblue;
	margin-left: 10px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
}
</style>
